<script>
import { TABLE_FIELD_QUARTER, TABLE_FIELD_YEAR } from '@/config'
import { loadUpdateUnitDetails } from '@/api/enterpriseQuarterlyReport'
import ReportPerson from '@/components/quarterly-account-table/report-person.vue'
import { uuid } from '@/utils'

export default {
  name: 'enterprise-basic-table',
  components: { ReportPerson },
  props: {
    // 企业ID
    enterpriseId: {
      type: String,
      required: true,
    },
    // 企业名称
    enterpriseName: String,
    // 年份
    year: {
      type: [String, Number],
      required: true,
    },
    // 季度
    quarter: {
      type: [String, Number],
      required: true,
    },
    // 表ID
    tId: {
      type: Number,
      required: true,
    },
    // 表名称
    name: {
      type: String,
      required: true,
    },
    // 表数据项
    columns: {
      type: Array,
      required: true,
    },
    // 政府端
    isGovernment: Boolean,
    readonly: Boolean,
    showLineNumber: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
      // 点击单元格后，正在输入的input索引
      inputIndex: -1,
      rowIndex: -1,

      /**
       * 报表数据格式
       */
      data: {
        id: '',
        ssdq: '',
        ssly: '',
        hy: '',
        dwlx: '',
        dwxxmc: '',
        frdwdm: '',
        dwzcrq: '',
        dwzczb: '',
        fddbrxm: '',
        lxdh: '',
        sfyq: '',
        ssyqjtmc: '',
        dwdz: '',
        yzbm: '',
        xzqhdm: '',
        dzyx: '',
        nygljgmc: '',
        cz: '',
        zgjnldxm: '',
        lxdh1: '',
        nyglfzrxm: '',
        sj: '',
        nyglszh: '',
        sftgnygltxrz: '',
        tgrq: '',
        rzjg: '',

        bqgyzcz: '',
        sngyzcz: '',
        tbgyzcz: '',
        bqjgzs: '',
        snjgzs: '',
        tbjgzs: '',
        bqgyzczkbj: '',
        sngyzczkbj: '',
        tbgyzczkbj: '',
        bqxssr: '',
        snxssr: '',
        tbxssr: '',
        bqsjls: '',
        snsjls: '',
        tbsjls: '',
        bqcyry: '',
        sncyry: '',
        tbcyry: '',
        bqnyglsrs: '',
        snnyglsrs: '',
        tbnyglsrs: '',
        bqsccb: '',
        snsccb: '',
        tbsccb: '',
        bqnyxfcb: '',
        snnyxfcb: '',

        tbnyxfcb: '',
        bqnyxfzsccbbl: '',
        snnyxfzsccbbl: '',
        tbnyxfzsccbbl: '',
        bqzhnyxfl: '',
        snzhnyxfl: '',
        tbzhnyxfl: '',
        bqdwzczzhnh: '',
        sndwzczzhnh: '',
        tbdwzczzhnh: '',
        bqzzjrl: '',
        snzzjrl: '',
        tbzzjrl: '',
        bz: '',
      },
      lists: [
        {
          uuid: uuid(),
          data: Array(7).fill(''),
        },
        {
          uuid: uuid(),
          data: Array(7).fill(''),
        }
      ],
      visible: false,
    }
  },
  computed: {
    title () {
      if (this.enterpriseName) {
        return `${this.enterpriseName}（${this.year}年）${this.name}`
      }
      return `${this.name}（${this.year}年）`
    },
    fromGovernmentSide () {
      return this.isGovernment && this.readonly === true
    },
    /**
     *
     * @returns {{tbsjls: (number|string), bqdwzczzhnh: (string|number), tbgyzczkbj: (number|string), tbgyzcz: (number|string), tbdwzczzhnh: (string|number), tbnyxfcb: (number|string), tbxssr: (number|string), tbjgzs: (number|string), tbnyglsrs: (number|string), tbcyry: (number|string), tbsccb: (number|string), tbnyxfzsccbbl: (string|number), tbzhnyxfl: (number|string), bqnyxfzsccbbl: (string|number)}}
     */
    calc () {
      const {
        sndwzczzhnh,
        bqzhnyxfl, snzhnyxfl,
        snnyxfzsccbbl,
        bqnyxfcb, snnyxfcb,
        bqsccb, snsccb,
        bqnyglsrs, snnyglsrs,
        bqcyry, sncyry,
        bqsjls, snsjls,
        bqxssr, snxssr,
        bqgyzczkbj, sngyzczkbj,
        bqjgzs, snjgzs,
        bqgyzcz, sngyzcz,
      } = this.data

      // 同比增长率 = （本期数 - 上期数）/ 上期数 ×100%
      const tb = (b, s) => {
        const n = +(((+b) - (+s)) * 100 / (+s)).toFixed(2)
        return Number.isFinite(n) ? n : ''
      }

      // 能源消费占生产成本比例 = 能源消费成本 ÷ 生产成本 x 100%
      const qb = (a, b) => {
        const n = +(((+a) * 100 / (+b)).toFixed(2))
        return Number.isFinite(n) ? n : ''
      }

      // 单位产值综合能耗 ＝ 综合能源消费量 ÷ 工业总产值（可比价）
      const xb = (a, b) => {
        const n = +(((+a) / (+b)).toFixed(2))
        return Number.isFinite(n) ? n : ''
      }

      // 本期能源消费占生产成本比例
      const bqnyxfzsccbbl = qb(bqnyxfcb, bqsccb)
      const tbnyxfzsccbbl = tb(bqnyxfzsccbbl, snnyxfzsccbbl)

      // 单位产值综合能耗
      const bqdwzczzhnh = xb(bqzhnyxfl, bqgyzczkbj)
      const tbdwzczzhnh = tb(bqdwzczzhnh, sndwzczzhnh)

      return {
        // 综合能源消费量  （本期值是从结构附表中获取的）
        tbzhnyxfl: tb(bqzhnyxfl, snzhnyxfl),

        tbnyxfcb: tb(bqnyxfcb, snnyxfcb),
        tbsccb: tb(bqsccb, snsccb),
        tbnyglsrs: tb(bqnyglsrs, snnyglsrs),
        tbcyry: tb(bqcyry, sncyry),
        tbsjls: tb(bqsjls, snsjls),
        tbxssr: tb(bqxssr, snxssr),
        tbgyzczkbj: tb(bqgyzczkbj, sngyzczkbj),
        tbjgzs: tb(bqjgzs, snjgzs),
        tbgyzcz: tb(bqgyzcz, sngyzcz),

        // 能源消费占生产成本比例
        bqnyxfzsccbbl,
        tbnyxfzsccbbl,

        // 单位产值综合能耗
        bqdwzczzhnh,
        tbdwzczzhnh,
      }
    },
  },
  beforeDestroy () {
    this.unbindArrowKeyEvent()
  },
  mounted () {
    this.initLists()
    this.bindArrowKeyEvent()
  },
  methods: {
    getPrevLists (params) {
      return this.initLists(params)
    },
    loadList (params) {
      return loadUpdateUnitDetails(params)
    },
    refresh () {
      this.initLists()
    },
    _initLists (l) {
      this.data = this.$options.data().data
    },
    // 初始化表数据
    initLists (params) {
      const transfer = (array) => {
        const obj = array[0] || {}
        return {
          ...this.$options.data().data,
          ...obj,
        }
      }
      // 查询企业填报的数据
      if (this.loadList) {
        params = params || {
          [TABLE_FIELD_YEAR]: this.year,
          [TABLE_FIELD_QUARTER]: this.quarter,
          tenantId: this.enterpriseId
        }
        return this.loadList(params).then(res => {
          if (res.code === 200) {
            const data = res.data || []
            this.data = transfer(data)

            this.$nextTick(() => {
              this.initInputIndex()
            })
          }
        }).catch(() => {
          this._initLists(0)
          this.$nextTick(() => {
            this.initInputIndex()
          })
        })
      }
    },

    // 暴露给使用者的获取报表数据的方法
    getData () {
      const data = { ...this.data }
      delete data.updateId
      delete data.updateTime
      delete data.creationId
      delete data.creationTime
      delete data.id
      return data
    },

    // 给每个input添加索引
    initInputIndex () {
      const inputs = document.querySelectorAll('.input-cell input')
      inputs.forEach((input, index) => {
        input.dataset.inputIndex = index + ''
      })
    },

    // 单击单元格（input框）
    clickHandler (evt) {
      evt.target.select()
      this.inputIndex = Number(evt.target.dataset.inputIndex)

      this.visible = false
    },
    clickListsTrHandler (index) {
      this.rowIndex = index
    },
    eventHandler (e) {
      const { key, keyCode } = e
      if (keyCode < 37 || keyCode > 40 || key.indexOf('Arrow') === -1) {
        return false
      }
      const inputs = document.querySelectorAll('.input-cell input')
      let inputIndex = this.inputIndex

      // ArrowLeft
      if (
        key === 'ArrowLeft' || keyCode === 37 ||
        key === 'ArrowUp' || keyCode === 38
      ) {
        inputIndex--
      }
      // ArrowRight Or ArrowDown
      if (
        key === 'ArrowRight' || keyCode === 39 ||
        key === 'ArrowDown' || keyCode === 40
      ) {
        inputIndex++
      }
      if (inputIndex >= 0 && inputIndex <= inputs.length - 1) {
        this.inputIndex = inputIndex
      }
      inputs[this.inputIndex]?.click()
      inputs[this.inputIndex]?.scrollIntoView(false)
    },

    // 绑定方向快捷键事件
    bindArrowKeyEvent () {
      document.addEventListener('keyup', this.eventHandler, false)
    },

    // 解除绑定方向快捷键事件
    unbindArrowKeyEvent () {
      document.removeEventListener('keyup', this.eventHandler, false)
    },

    // 选中某一行的情况下右键操作
    onContextmenu (evt) {
      evt.preventDefault()
      if (this.readonly) return false

      let tr = evt.target
      while (tr) {
        if ((tr.tagName || '').toUpperCase() === 'TR') {
          break
        }
        tr = tr.parentNode
      }
      if (tr) {
        const menuMinWidth = 105
        const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
        const offsetWidth = this.$el.offsetWidth // container width
        const maxLeft = offsetWidth - menuMinWidth // left boundary
        const left = evt.clientX - offsetLeft + 15 // 15: margin right

        if (left > maxLeft) {
          this.left = maxLeft
        } else {
          this.left = left
        }

        this.top = evt.clientY - 100
        this.visible = true
      }
    },

    // 删除 rowIndex 行
    delRow () {
      const rowIndex = this.rowIndex
      this.$confirm('确定要删除这一行？').then(() => {
        this.lists.splice(rowIndex, 1)
        this.visible = false
      }).catch(() => {})
    },

    createAEmptyRow () {
      return Array(6).fill('')
    },
    // 在 rowIndex 行前添加一行
    prependRow () {
      const rowIndex = this.rowIndex
      const emptyRow = this.createAEmptyRow()
      if (rowIndex > -1) {
        this.lists.splice(rowIndex, 0, {
          uuid: uuid(),
          data: [...emptyRow]
        })

        this.$nextTick(() => {
          this.initInputIndex()
        })
      }
      this.visible = false
    },

    // 在 rowIndex 行后添加一行
    appendRow () {
      const rowIndex = this.rowIndex
      const emptyRow = this.createAEmptyRow()
      if (rowIndex > -1) {
        this.lists.splice(rowIndex + 1, 0, {
          uuid: uuid(),
          data: [...emptyRow]
        })

        this.$nextTick(() => {
          this.initInputIndex()
        })
      }
      this.visible = false
    },
  },
}
</script>

<template>
  <div class="bg-white height-100 quarterly-account-table position-relative overflow-hidden">
    <slot name="title" :title="title">
      <h2 class="table-title">
        {{title}}
      </h2>
    </slot>
    <el-scrollbar :style="{height: 'calc(100vh - 380px)'}" wrap-style="overflow-x: hidden;">
      <table class="report-table">
        <tbody ref="tbody">
          <tr>
            <th>所属地区</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.ssdq" @click="clickHandler">
              </div>
            </td>
            <th>所属领域</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.ssly" @click="clickHandler">
              </div>
            </td>
            <th>行业</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.hy" @click="clickHandler">
              </div>
            </td>
            <th>单位类型</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.dwlx" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>单位详细名称</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.dwxxmc" @click="clickHandler">
              </div>
            </td>
            <th>法人单位代码</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.frdwdm" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>单位注册日期</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.dwzcrq" @click="clickHandler">
              </div>
            </td>
            <th>单位注册资本（万元）</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.dwzczb" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>法定代表人姓名</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.fddbrxm" @click="clickHandler">
              </div>
            </td>
            <th>联系电话（区号）</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.lxdh" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>是否央企</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.sfyq" @click="clickHandler">
              </div>
            </td>
            <th>所属央企集团名称</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.ssyqjtmc" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>单位地址</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.dwdz" @click="clickHandler">
              </div>
            </td>
            <th>邮政编码</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.yzbm" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>行政区划代码</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.xzqhdm" @click="clickHandler">
              </div>
            </td>
            <th>电子邮箱</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.dzyx" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>能源管理机构名称</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.nygljgmc" @click="clickHandler">
              </div>
            </td>
            <th>传真（区号）</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.cz" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>主管节能领导姓名</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.zgjnldxm" @click="clickHandler">
              </div>
            </td>
            <th>联系电话（区号）</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.lxdh1" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>能源管理负责人姓名</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.nyglfzrxm" @click="clickHandler">
              </div>
            </td>
            <th>手机</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.sj" @click="clickHandler">
              </div>
            </td>
            <th>能源管理师证号</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.nyglszh" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th>是否通过能源管理体系认证</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.sftgnygltxrz" @click="clickHandler">
              </div>
            </td>
            <th>通过日期</th>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.tgrq" @click="clickHandler">
              </div>
            </td>
            <th>认证机构</th>
            <td colspan="3">
              <div class="input-cell">
                <input type="text" v-model="data.rzjg" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <th colspan="2">指标名称</th>
            <th>计量单位</th>
            <th>本期值</th>
            <th>上年值</th>
            <th>同比变化率（%）</th>
            <th colspan="2">产值及能源消费变化 情况说明</th>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">工业总产值(可比价)</td>
            <td class="like-th-but-no-bg-no-bold">万元</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqgyzczkbj" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.sngyzczkbj}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbgyzczkbj}}
              </div>
            </td>
            <td rowspan="10" colspan="2" class="special-cell">
              <div class="input-cell">
                <input type="text" v-model="data.bz" @click="clickHandler">
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">销售收入</td>
            <td class="like-th-but-no-bg-no-bold">万元</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqxssr" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snxssr}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbxssr}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">上缴利税</td>
            <td class="like-th-but-no-bg-no-bold">万元</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqsjls" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snsjls}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbsjls}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">从业人员</td>
            <td class="like-th-but-no-bg-no-bold">人</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqcyry" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.sncyry}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbcyry}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">能源管理师人数</td>
            <td class="like-th-but-no-bg-no-bold">人</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqnyglsrs" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snnyglsrs}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbnyglsrs}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">综合能源消费量(当量值)</td>
            <td class="like-th-but-no-bg-no-bold">万吨标准煤</td>
            <td class="readonly">
              <div class="span-cell">
                {{data.bqzhnyxfl}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snzhnyxfl}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbzhnyxfl}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">生产成本</td>
            <td class="like-th-but-no-bg-no-bold">万元</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqsccb" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snsccb}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbsccb}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">能源消费成本</td>
            <td class="like-th-but-no-bg-no-bold">万元</td>
            <td>
              <div class="input-cell">
                <input type="text" v-model="data.bqnyxfcb" @click="clickHandler">
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snnyxfcb}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbnyxfcb}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">能源消费占生产成本比例</td>
            <td class="like-th-but-no-bg-no-bold">%</td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.bqnyxfzsccbbl}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.snnyxfzsccbbl}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbnyxfzsccbbl}}
              </div>
            </td>
          </tr>
          <tr>
            <td class="like-th-but-no-bg-no-bold" colspan="2">单位总产值综合能耗(当量值)</td>
            <td class="like-th-but-no-bg-no-bold">吨标准煤/万元</td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.bqdwzczzhnh}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{data.sndwzczzhnh}}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{calc.tbdwzczzhnh}}
              </div>
            </td>
          </tr>
          <tr>
            <th colspan="2" rowspan="2">主要产品名称</th>
            <th colspan="2">年产能</th>
            <th colspan="2">年产量</th>
            <th colspan="2" class="with-border-top">单位产品能耗</th>
          </tr>
          <tr>
            <th>数量</th>
            <th>计量单位</th>
            <th>数量</th>
            <th>计量单位</th>
            <th>数值</th>
            <th>计量单位</th>
          </tr>
          <tr v-for="(item, index) in lists" :key="item.uuid" @click="clickListsTrHandler(index)">
            <td v-for="(v, i) in item.data" :key="i" :colspan="i === 0 ? 2 : 1" >
              <div class="input-cell">
                <input type="text" v-model="item.data[i]" @contextmenu="onContextmenu" @click="clickHandler">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </el-scrollbar>
    <transition name="el-fade-in">
      <ul v-if="visible" :style="{left:left+'px', top: top + 'px'}" class="contextmenu">
        <li style="color:var(--danger-color);" @click="delRow">删除当前行</li>
        <li class="divider"></li>
        <li @click="prependRow">在上方插入一行</li>
        <li @click="appendRow">在下方插入一行</li>
      </ul>
    </transition>
    <div class="fill-description">
      <report-person></report-person>
      <p>说明：</p>
      <p>1．所属地区填写用能单位所在的省（市、自治区）。</p>
      <p>2．未开展能源管理师试点的省（自治区、直辖市）能源管理师人数填0，证号可不填。</p>
      <p>3．单位产值综合能耗＝综合能源消费量÷工业总产值（可比价）</p>
      <p>4．若综合能源消费量、产值能耗指标与上年同比变化率超过5%时，要填写说明，字数在100个汉字以内。</p>
      <p>5．所列产品的能源消耗量不低于企业总能耗的80%。</p>
      <p>6．年产能是指相应产品主体设备的年设计产能。</p>
    </div>
  </div>
</template>

<style scoped>
.table-title {
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 500;
}
.report-table {
  --report-table-border-color: #efefef;
  width: 100%;
  height: 100%;
  border-spacing: 0;
  border: 1px solid var(--report-table-border-color);
  border-top: 0;
  text-align: center;
  table-layout: fixed;
}
.report-table td,
.report-table th {
  border-bottom: 1px solid var(--report-table-border-color);
  border-right: 1px solid var(--report-table-border-color);
  padding: 0;
}
.report-table th {
  padding: 10px 5px;
  font-size: 12px;
}
.report-table td.like-th-but-no-bg-no-bold {
  padding: 8px 5px;
  font-size: 12px;
}
.report-table tbody tr:first-child th,
.report-table tbody tr:first-child td {
  border-top: 1px solid var(--report-table-border-color);
}
.report-table tbody tr.is-selected {
  outline: 1px solid var(--theme-color);
  background: var(--report-table-border-color);
  background: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
}
.report-table tbody tr th:last-child,
.report-table tbody tr td:last-child {
  border-right: 0;
}
.report-table tbody tr:last-child th,
.report-table tbody tr:last-child td {
  border-bottom: 0;
}
.table-cell small {
  margin-bottom: 0;
  margin-top: 5px;
  font-weight: normal;
  font-size: 12px;
}
.input-cell input,
.input-cell {
  width: 100%;
  height: 100%;
  cursor: cell;
}
.input-cell input {
  border-color: transparent;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  text-align: center;
  font-size: 12px;
  padding: 5px;
  color: #888888;
  transition: all .6s;
}
.input-cell:not(.is-readonly) input:focus {
  border-color: black;
}
.readonly {
  background: #f6f6f6;
  overflow: hidden;
  font-size: 12px;
}
tr.is-selected .readonly {
  background: transparent;
}
.contextmenu {
  margin: 0;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 0;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
}
.contextmenu li:not(.divider) {
  margin: 0;
  padding: 10px 16px;
  cursor: pointer;

  &:hover {
    background: #eee;
    background: color-mix(in srgb, var(--theme-color) 10%, #ffffff);
  }
}
.divider {
  margin-top: 2px;
  margin-bottom: 2px;
  width: 100%;
  height: 1px;
  background: #eeeeee;
}
.special-cell {
  border-bottom: 0 !important;
  border-left: 1px solid var(--report-table-border-color) !important;
}
.fill-description {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 1rem;
  background: color-mix(in srgb, black 2%, #ffffff);
  font-size: 12px;
}
.with-border-top {
  border-top: 1px solid var(--report-table-border-color);
}
</style>
